// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
// const a = {template : "<div>A custom component!</div>"};
//
// const b = {template : "<div>B custom component!</div>"};

// var test1 = Vue.component("test1", {
//     "<div>C custom component!</div>"
// });
//
// var test2 = Vue.component("test2", {
//     "<div>D custom component!</div>"
// });

var data = {
    tableData: [],
    multipleSelection:[],
    currentPage: 1,
    total : 0,
    pageSize : 10,
};

const tableTemplate = Vue.component("tableTemplate", {
    template : "#tableTemplate",
    data : function () {
        return data;
    },
    methods: {
        setCurrent:function(rows) {
            if (rows) {
                this.$refs.multipleTable.toggleRowSelection(rows);
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleCurrentChange:function(val) {
            console.info("选中的是：" + val);
            data.multipleSelection = val;
        },
        handleEdit:function(index, row) {
            console.log(index, row.address);
        },
        handleDelete:function(index, row) {
            console.log(index, row);
        },
        handleSizeChange(val) {
            console.log("每页" + val + "条");
            data.pageSize = val;
        },
        currentChange(val) {
            console.log("当前页: " + val);
            axios({
                method: 'post',
                url: '/main/vue/list',
                params : {page : val, pageSize : data.pageSize},
            }).then(function (result) {
                data.tableData = eval(result.data.data);
                data.total = result.data.totalelements;
            });
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            axios({
                method: 'post',
                url: '/main/vue/list',
            }).then(function (result) {
                vm.tableData = eval(result.data.data);
                vm.total = result.data.totalelements;
            });
        });
    }

});
const BTemplate = Vue.component("BTemplate", {
    template : "#BTemplate",
});

//2. 定义路由
//每个路由应该映射一个组件。 其中"component" 可以是
//通过 Vue.extend() 创建的组件构造器，
//或者，只是一个组件配置对象。
const routes = [
    {path: '/', redirect: 'tableTemplate'},
    {path : "/foo", component : tableTemplate, name : "表格"},
    {path : "/bar", component : BTemplate, name : "路由二"},
];

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
    routes, // （缩写）相当于 routes: routes，
});

Vue.config.devtools = true;
var vm = new Vue({
    el:'#rrapp',
    router,
    data : {
    },
    created : function () {
      console.info("页面初期化执行");
        axios({
            method: 'post',
            url: '/main/vue/list',
        }).then(function (result) {
            vm.tableData = eval(result.data.data);
            vm.total = result.data.totalelements;
        });
    },
    watch: {
        multipleSelection: function () {
            let arr = [];
            for (let i in this.multipleSelection) {
                arr.push(this.multipleSelection[i].name);
            }
            console.log('勾中的id为：' + arr.join());
        }
    },
    methods: {
        // setCurrent:function(rows) {
        //     if (rows) {
        //         this.$refs.multipleTable.toggleRowSelection(rows);
        //     } else {
        //         this.$refs.multipleTable.clearSelection();
        //     }
        // },
        // handleCurrentChange:function(val) {
        //     console.info("选中的是：" + val);
        //     this.multipleSelection = val;
        // },
        // handleEdit:function(index, row) {
        //     console.log(index, row.address);
        // },
        // handleDelete:function(index, row) {
        //     console.log(index, row);
        // },
        // handleSizeChange(val) {
        //     console.log("每页" + val + "条");
        //     vm.pageSize = val;
        // },
        // currentChange(val) {
        //     console.log("当前页: " + val);
        //     axios({
        //         method: 'post',
        //         url: '/main/vue/list',
        //         params : {"page" : val, "pageSize" : vm.pageSize},
        //     }).then(function (result) {
        //         vm.tableData = eval(result.data.data);
        //         vm.total = result.data.totalelements;
        //     });
        // }
    }
});